<template>
    <div class="monthlyMaterialVariation">
      <el-row class="one_row">
        <el-form :model="requestParam"
                 label-width="140px">
          <el-col :span="6">
            <el-form-item label="编制机构">
              <el-input v-model="requestParam.org_name"
                        placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="单据编号">
              <el-input v-model="requestParam.Code"
                        placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="编制人">
              <el-input v-model="requestParam.contract_name"
                        placeholder=""></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
              <el-form-item label="单据状态">
                <el-select v-model="requestParam.State" placeholder="请选择">
                    <el-option
                    v-for="item in requestParam.options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <el-row  class="two_row">
        <el-form :model="requestParam"
                 label-width="140px">
          <el-col :span="6" class="time">
              <el-form-item label="编制日期">
                <el-date-picker
                  is-range
                  v-model="requestParam.timeValue"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围">
                </el-date-picker>
            </el-form-item>
          </el-col>    
          <el-col :span="6" class="time">
              <el-form-item label="计划日期">
                <el-date-picker
                  is-range
                  v-model="requestParam.timeValue2"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围">
                </el-date-picker>
            </el-form-item>
          </el-col>     
        </el-form>
      </el-row>
      <el-row class="three_row">
        <el-col :span="6">
            <div>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button @click="reset">重置</el-button>
          </div>
      </el-col>
      </el-row>
      <el-table :highlight-current-row="true"
                border
                :header-cell-style="{ background: '#f5f5f5' }"
                :data="tableData.list"
                height="610px">
        <el-table-column prop="serial_number"
                         label="序号"
                         align="center"
                         type="index"
                         width="100px"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="org_name"
                         label="编制机构"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="Code"
                         label="单据编号"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="BizDate"
                         label="计划日期"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="JHLX"
                         label="计划类型"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="State"
                         label="单据状态"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="creator_name"
                         label="编制人"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="CreateTime"
                         label="编制日期"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="create_at"
                         label="同步时间"
                         align="center"
                         show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="操作"
                         width="200px"
                         align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="details(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @current-change="handlePageChange"
                     @size-change="handleSizeChange"
                     :current-page="requestParam.page"
                     :page-size="requestParam.page_size"
                     layout="total,sizes,prev, pager, next, jumper"
                     background
                     :total="tableData.total_count"
                     align="center">
      </el-pagination>
    </div>
  </template>
  
  <script>
  import { BulkManageApi } from "@/services/ResourceCentre";
  export default {
    components: {
  
    },
    data () {
      return {
        requestParam: {
          project_id:'',
          org_name: '',
          is_page: 1,
          page: 1,
          page_size: 10,
          Code:'',
          creator_name:'',
          time:'',
          State:'',
          contract_name:'',
          timeValue: '',
          timeValue2: '',
          create_start_date:'',
          create_end_date:'',
          BizDate_start:'',
          BizDate_end:'',
          options: [{
            value: '0',
            label: '全部'
          }, {
            value: '1',
            label: '是'
          }, {
            value: '2',
            label: '否'
          }],
          value:'全部',
        },
        resetParam: {
          project_id:'',
          org_name: '',
          is_page: 1,
          page: 1,
          page_size: 10,
          Code:'',
          creator_name:'',
          time:'',
          State:'',
          contract_name:'',
          timeValue: '',
          timeValue2: '',
          create_start_date:'',
          create_end_date:'',
          BizDate_start:'',
          BizDate_end:'',
          options: [{
            value: '0',
            label: '全部'
          }, {
            value: '1',
            label: '是'
          }, {
            value: '2',
            label: '否'
          }],
          value:'全部',
        },
        tableData: {
          list: [],
          page: 1,
          total_count: 0
        }
      };
    },
    methods: {
      // 查询
      search () {
        this.requestParam.page = 1
        this.getData()
      },
      // 重置
      reset () {
        let resetParam = JSON.parse(JSON.stringify(this.resetParam));
        this.requestParam = Object.assign(this.requestParam, resetParam);
        this.getData()
      },
      handlePageChange (page) {
        this.requestParam.page = page
        this.getData()
      },
      handleSizeChange(page_size){
          this.requestParam.page_size=page_size;
          this.getData()
      },
       // 将标准时间转化为2022-12-08 02:02:10
       timeInvert(time){
        for(let i=0;i<time.length;i++){
          let date2 = new Date(time[i]);
          // 获取年
          let year = date2.getFullYear();
          // 获取月
          let mon = date2.getMonth() + 1;
          if(mon<10){
            mon='0'+mon
          }
          // 获取日
          let day = date2.getDate();
          if(day<10){
            day='0'+day
          }
          // 获取小时
          let hours = date2.getHours();
          if(hours<10){
            hours='0'+hours
          }
          console.log(hours);
          // 获取分钟
          let min = date2.getMinutes();
          if(min<10){
            min='0'+min
          }
          // 获取秒
          let sec = date2.getSeconds();
          if(sec<10){
            sec='0'+sec
          }
          let times = year + "-" + mon + "-" + day+" "+ hours + ":" + min + ":" + sec;
          if(time==this.requestParam.timeValue){
            if(i==0){
              this.requestParam.create_start_date=times;
            }else{
              this.requestParam.create_end_date=times;
            }
          }else if(time==this.requestParam.timeValue2){
            if(i==0){
              this.requestParam.BizDate_start=times;
            }else{
              this.requestParam.BizDate_end=times;
            }
          }
           
          }
      },
      getData () {
        // 从仓库里面获取id
        let choosedProject = this.$store.state.choosedProject || {};
        let projectId = choosedProject.project_id;
        if(projectId){
          this.requestParam.project_id=projectId
        }else{
          let choosedProject = JSON.parse(localStorage.getItem('choosedProject'));
          let projectId = choosedProject.project_id;
          this.requestParam.project_id=projectId;
        }
        // 判断存放开始结束日期的timeValue是否存在
        if(this.requestParam.timeValue){
          this.timeInvert(this.requestParam.timeValue)
        }else{
          this.requestParam.create_start_date='',
          this.requestParam.create_end_date=''
        }
        // 判断存放计划日期的timeValue2是否存在
        if(this.requestParam.timeValue2){
          this.timeInvert(this.requestParam.timeValue2)
        }else{
          this.requestParam.BizDate_start='',
          this.requestParam.BizDate_end=''
        }
        BulkManageApi.getProjectMonthMaterialSchedule({
          params:{
            project_id:this.requestParam.project_id,
            org_name:this.requestParam.org_name,
            Code:this.requestParam.Code,
            State:this.requestParam.State,
            page:this.requestParam.page,
            page_size:this.requestParam.page_size,
            is_page:this.requestParam.is_page,
            create_start_date:this.requestParam.create_start_date,
            create_end_date:this.requestParam.create_end_date,
            BizDate_start:this.requestParam.BizDate_start,
            BizDate_end:this.requestParam.BizDate_end
          }
        }).then(res => {
          if (res.code === 0) {
            this.tableData = res.data
            console.log(res);
          }
        })  
      },
      // 当前行的详情信息
      details(row){
        console.log(row);
        this.$router.push({
          name:"项目月度材料需求计划详情",
          params:{
            master_bill_id:row.master_bill_id,
            requestParam:row
          }
        })
      }
    },
    created () {
  
    },
    mounted () {
    this.getData()
    },
  };
  </script>
  
  <style scoped lang="scss">
   /deep/ .el-range-separator{
      width: 12% !important;
  }
  /deep/  .el-date-editor--datetimerange.el-input__inner{
    width: 258px!important;
  }
  
  .monthlyMaterialVariation{
      width: 100%;
      padding: 20px;
      .three_row{
          width: 100%;
          margin-bottom: 20px;
          .el-col{
              width: 100%;
              display: flex;
              justify-content:flex-end;
              align-items: center;
          }
         
      }
  }
  
  </style>
  